import { Progress, Tooltip } from 'antd';
import { t } from 'i18next';
import { useMemo } from 'react';

import { SearchScoreTypeEnum, SearchScoreTypeMap } from '@/common';
import { SearchDataResponseItemType } from '@/types/dataset/type';

import { Tag } from '../eai-design/tag';

type ScoreItemType = SearchDataResponseItemType['score'][0];
export const QuoteItem = ({
  quoteItem,
  canViewSource,
  linkToDataset,
}: {
  quoteItem: SearchDataResponseItemType;
  canViewSource?: boolean;
  linkToDataset?: boolean;
}) => {
  const { primaryScore, secondaryScore } = useMemo(() => {
    if (!Array.isArray(quoteItem.score)) {
      return {
        primaryScore: undefined,
        secondaryScore: [],
      };
    }

    // rrf -> rerank -> embedding -> fullText 优先级
    let rrfScore: ScoreItemType | undefined;
    let reRankScore: ScoreItemType | undefined;
    let embeddingScore: ScoreItemType | undefined;
    let fullTextScore: ScoreItemType | undefined;
    let imageEmbeddingScore: ScoreItemType | undefined;
    let graphEntityScore: ScoreItemType | undefined;
    let graphRelationScore: ScoreItemType | undefined;
    let graphTextScore: ScoreItemType | undefined;

    quoteItem.score.forEach((item) => {
      if (item.type === SearchScoreTypeEnum.rrf) {
        rrfScore = item;
      } else if (item.type === SearchScoreTypeEnum.reRank) {
        reRankScore = item;
      } else if (item.type === SearchScoreTypeEnum.embedding) {
        embeddingScore = item;
      } else if (item.type === SearchScoreTypeEnum.fullText) {
        fullTextScore = item;
      } else if (item.type === SearchScoreTypeEnum.imageEmbedding) {
        imageEmbeddingScore = item;
      } else if (item.type === SearchScoreTypeEnum.graphEntityScore) {
        graphEntityScore = item;
      } else if (item.type === SearchScoreTypeEnum.graphRelationScore) {
        graphRelationScore = item;
      } else if (item.type === SearchScoreTypeEnum.graphTextScore) {
        graphTextScore = item;
      }
    });

    const primaryScore = (rrfScore ||
      reRankScore ||
      embeddingScore ||
      fullTextScore ||
      imageEmbeddingScore ||
      graphEntityScore ||
      graphRelationScore ||
      graphTextScore) as unknown as ScoreItemType;
    const secondaryScore = [
      rrfScore,
      reRankScore,
      embeddingScore,
      fullTextScore,
      imageEmbeddingScore,
      graphEntityScore,
      graphRelationScore,
      graphTextScore,
    ].filter(
      // @ts-ignore
      (item) => item && primaryScore && item.type !== primaryScore.type,
    ) as unknown as ScoreItemType[];

    return {
      primaryScore,
      secondaryScore,
    };
  }, [quoteItem.score]);

  const renderScore = (score: ScoreItemType) => {
    return <div className="text-xs">{Number(score.value).toFixed(4)}</div>;
  };

  return (
    <div className="relative flex flex-col gap-2 text-xs">
      {primaryScore && (
        <div className="flex flex-wrap gap-2">
          <div className="flex items-center">
            <Tag color="blue" className=" text-text-5">
              <span>#{primaryScore.index + 1} - </span>
              {t(SearchScoreTypeMap[primaryScore.type].label)}
            </Tag>
          </div>
          {secondaryScore.map((item, index) => (
            <Tooltip key={index} title={t(SearchScoreTypeMap[item.type].desc)}>
              <div className="flex items-center">
                <Tag color={SearchScoreTypeMap[item.type].color} className="rounded-sm text-white">
                  #{item.index + 1}
                </Tag>
                <div className="flex items-center gap-1">
                  <span>{t(SearchScoreTypeMap[item.type].label)} </span>
                  <Progress
                    size="small"
                    steps={5}
                    className="text-xs"
                    strokeColor={SearchScoreTypeMap[item.type].color}
                    percent={Number(item.value) * 100}
                    format={() => renderScore(item)}
                  />
                </div>
              </div>
            </Tooltip>
          ))}
        </div>
      )}

      <div className="text-sm text-text-5">
        <div className="overflow-hidden break-words text-text-5">{quoteItem.q}</div>
        <div className="overflow-hidden break-words text-text-5">{quoteItem.a}</div>
      </div>
    </div>
  );
};
